import { Divider, Badge } from 'antd';
import React from 'react';
import cn from 'classnames';

import styles from './index.module.less';

/**
 * 渲染统计数据
 * @param {Array} data 显示用数据
 * @param {Boolean} showBadge 是否显示角标
 */
export default function Statistic({ data = [], showBadge = false }) {
    /**
     * 获取数字提醒的状态
     */
    const getBadgeState = (num, recruitStatus) => {
        if (!showBadge) return 0;
        if (num === undefined || num === 0 || recruitStatus === 4 || recruitStatus === 5) {
            // 未传值，不显示
            // 招聘需求状态为已完成 or 已取消，不显示
            return 0;
        }
        return num > 99 ? <div className={styles.roundBadge}>...</div> : `+${num}`; // 大于99返回省略号
    };
    /**
     * 渲染分割线，最后一个元素不分割，改为占位div，避免右侧异常遮盖。无badge情况下无需展示。
     * 在角标数字、内容数字足够大时,调整样式避免重叠
     */
    const renderDivider = index => {
        let marginLeft = 27;
        if (showBadge) {
            const item = data[index];
            if (item.value > 10) {
                marginLeft += 2;
            }
            const unReadNum = getBadgeState(item.unReadNum, item.recruitStatus);
            if (Number.isInteger(unReadNum) && unReadNum > 10) {
                marginLeft += 5;
            }
        }
        if (index !== data.length - 1) {
            return <Divider type="vertical" style={{ height: '56%', margin: `0 20px 0 ${marginLeft}px` }} />;
        }
        if (showBadge) return <div style={{ width: '16px' }}></div>;
        return null; // 无badge情况下不显示
    };

    return (
        <div className={styles.wrap}>
            {data.map((item, index) => (
                <div key={item.label} className={styles.itemWrap}>
                    <Badge
                        count={getBadgeState(item.unReadNum, item.recruitStatus)}
                        style={{
                            backgroundColor: '#FFA22D',
                            transform: 'translate(60%,-50%)',
                            right: '-25%'
                        }}
                    >
                        <div className={styles.itemBox}>
                            <div
                                className={cn(styles.itemValue, { [styles.itemDisabled]: item.disabled })}
                                onClick={item.action}
                            >
                                {item.value}
                            </div>
                            <div className={styles.itemLabel}>{item.label}</div>
                        </div>
                    </Badge>
                    {renderDivider(index)}
                </div>
            ))}
        </div>
    );
}
